import React, {PropTypes} from 'react'
import {withRouter} from 'react-router';
import {Route, BrowserRouter, Switch, Link} from 'react-router-dom'

const Home2 = ()=>(
    <div>
        <h2>Home page2, Welcome!</h2>
    </div>
)

class Topic extends React.Component {

    componentWillReceiveProps(nextProps) {
        setTimeout(function () {
            window.confirm("abc");
        }, 1200);
    }

    render() {
        console.log(this.props.match); // {path: "/topics/:topicId", url: "/topics/rendering", isExact: true, params: {topicId:"rendering"}}
        return (<div>
            <h3>{this.props.match.params.topicId}</h3>
        </div>)
    }
}

const getConfirmation = (message, callback) => {
    console.log(message);
    console.log(callback);
    const allowTransition = window.confirm(message)
    callback(allowTransition)
}

class ShowLocation extends React.Component {
    render() {
        console.log(this.props.location.pathname);
        return (<div>{this.props.location.pathname}</div>);
    }
}
;

ShowLocation.propTypes = {
    match: PropTypes.object.isRequired,
    location: PropTypes.object.isRequired,
    history: PropTypes.object.isRequired
}

const ShowTheLocationWithRouter = withRouter(ShowLocation)

const BasicApp = ()=>(
    <BrowserRouter basename="/fk" getUserConfirmation={getConfirmation}>
        <div>
            <ul>
                <li><Link to="/">Index</Link></li>
                <li><Link to="/about">About</Link></li>
                <li><Link to="/render">Render</Link></li>
            </ul>
            <hr/>
            <Route path="/about" render={()=>(<div>ABCDE</div>)}/>
            <Route path="/render" component={Home2}/>
        </div>
    </BrowserRouter>
)

export default BasicApp

